<template> 

<section class="loginContainer">
	<div class="loginInner">
		<div class="login_header">
			<h2 class="login_logo">站酷外卖</h2>
			<div class="login_header_title">
				<a href="javascript:;" class="on">短信登录</a>
				<a href="javascript:;">密码登入</a>
			</div>
		</div>
		<div class="login_content">
		 <form>
		 	<div class="on">
		 		<section class="login_message">
		 			<input type="tel" maxlength="11" placeholder="手机号">
		 			<button disabled="disabled" class="get_verification">获取验证码</button>
		 		</section>
		 		<section class="login_verification">
		 			<input type="tel" maxlength="8" placeholder="验证码">
		 		</section>
		 		<section class="login_hint">
		 			温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
		 			<a href="javascript:;">《用户服务协议》</a>
		 		</section>
		 	</div>
		 	

		 	<div>
		 		
		 		<section class="login_message">
		 			<input type="tel" maxlength="11" placeholder="手机/邮箱/用户名">
		 		</section>

		 		<section class="login_verification">
		 			<input type="tel" placeholder="验证码" maxlength="8">


		 			<div class="switch_button off">
		 				<div class="switch_circle"></div>
		 				<div class="switch_text">...</div>
		 			</div>


		 		</section>

		 		<section>
		 			<input type="text" maxlength="11" placeholder="密码">
		 			<img src="./img/captcha.svg">
		 		</section>

		 	</div>





		 	<button class="login_submit">登入</button>
		 	
		 </form>	


		 <a href="javascript:;" class="about_us">关于我们</a>


		</div>

		<a href="javascript:;" class="go_back" @click="routerBack">
			<i class="iconfont icon-left"></i>
		</a>



	</div>
</section>

</template> 
<script> 


export default {

 methods:{
      routerBack(){
      
       this.$router.back();
      }
    }

} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
	.loginContainer
		width 100%
		height 100%
		background #fff
		.loginInner
			width 80%
			padding-top 60px
			margin 0px auto
			.login_header
				.login_logo
					font-size 40px
					color #02a774
					text-align center
					font-weight bold
				.login_header_title
					padding-top 40px
					text-align center
					>a
						font-size 14px
						color #333
						display inline-block
						padding-bottom 4px
						&:first-child
							margin-rigth 40px
						&.on
							color #02a774
							font-weight 700
							border-bottom 2px solid #02a774
			.login_content
				>form
					>div
						display none
						&.on
							display block
							input
								width 100%
								height 100%
								padding-left 10px
								border 1px solid #ddd
								border-radius 4px
								box-sizing border-box
								outline none
								font 400 14px Arial
								&:focus
									border 1px solid #02a774
							.login_message
								height 48px
								background #fff
								margin-top 16px
								position relative
								font-size 14px
								.get_verification
									background transparent
									position absolute
									top 50%
									right 10px
									border 0
									color #ccc
									font-size 14px
									transform translateY(-50%)
							.login_verification
								height 48px
								margin-top 16px
								font-size 14px
								background #fff	
								position relative
								.switch_button
									color #333
									font-size 12px
									border 1px solid #ddd
									padding 0 6px
									width 30px
									height 16px
									position absolute
									top 50%
									right 10px
									border-radius 8px
									line-height 16px
									transform translateY(-50%)
									transition background-color .3s,border-color .3s
									&.off
										background #fff
										.switch_text
											float right
											color #ddd
									&.on	
										background #02a774
									  .switch_circle
											background #fff
											width 16px
											height 16px
											border 1px solid #ddd
											border-radius 50%
											position absolute
											top -1px
											left -1px
											box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
											transition transform .3s
              .login_hint
								margin-top 12px
								color #999
								font-size 14px
								line-height 20px
								>a
									color #02a774
				.login_submit
					color #fff
					font-size 14px
					width 100%
					background #4cd96f
					border 0
					height 42px
					line-height 42px
					font-size 16px
					margin-top 30px
					border-radius 4px
					display block
			.about_us	
				display block
				color #999
				font-size 12px
				margin-top 20px
				text-align center
			.go_back
				position absolute
				top 5px
				left 5px
				color #999
				width 30px
				height 30px
				padding 5px
				.icon-left
					font-size 20px
					color #999





											
											


											

								  



										


						



</style>